<template>
    <div>
         <div ref="imageWrapper" style="background:red;width:25%">
            <div id="login">
                <el-form :model="loginForm">         
                    <h2>Ray商城登录</h2>
                    <el-form-item>
                        <el-input name="username" placeholder="请输入用户名/手机号" auto-complete="on"></el-input>
                    </el-form-item>

                    <el-form-item>
                        <el-input  name="password" placeholder="请输入密码" auto-complete="on"></el-input>
                    </el-form-item>

                    <el-form-item>
                        <el-button type="primary">登录</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
        <el-button style="width: 70%;" type="success" size="small" @click="toImage">生成截图</el-button>
        <a :href="imgUrl" class="down" download="下载">下载</a>
        <!-- <div ref="imageWrapper" style="background:red;width:25%">
            <span>收款商家:{{form.name}}</span><br>
            <span>费用名称:{{form.moneyName}}</span><br>
            <span>缴费金额:{{form.money}}</span>
        </div>
        <div class="button">
            <el-button style="width: 70%;" type="success" size="small" @click="toImage">生成截图</el-button>
            <a :href="imgUrl" class="down" download="下载">下载</a>
        </div>
        <div>
            <el-dialog title="提示" :visible.sync="dialogVisible" width="30%" append-to-body>
                 <img class="img-icon" :src="imgUrl" />
                <span slot="footer" class="dialog-footer">
                    <el-button @click="dialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
                </span>
            </el-dialog>
        </div> -->
    </div>
</template>
<script>
import html2canvas from "html2canvas"
export default {
    name: "test1",
    data() {
        return {
            bdTokenUrl:'https://realnameverify-test.fadada.com/fddAuthenticationService/v1/api/synsAuthentication.action?transaction_no=28C12CEE3ED395671D2ABBA308A2EA1D666D242F271DE0346734D906BE0C412254EAA9EBD2153E8C&sign=MkQ2RDgzN0FERTdCN0ZDNkIyMUIxMTQzRkU3OUM1NDU5QTk0RTIwNA==&app_id=403063&timestamp=1586938754842',
            form:{
                name:'张勋',
                moneyName:'生活费',
                money:'999.99',
            },
            dialogVisible:false,
            avatar:require('@/assets/avatar/avatar.png'),
            imgUrl:''
        }
    },
    mounted(){
        this.init()
    },
    methods: {
        init(){
            this.pageInit()
        },
        pageInit(){
            const oIframe = document.getElementById('bdIframe');
            const deviceWidth = document.documentElement.clientWidth;
            const deviceHeight = document.documentElement.clientHeight;
            oIframe.style.width = (Number(deviceWidth)-5) + 'px'; //数字是页面布局宽度差值
            oIframe.style.height = (Number(deviceHeight)-10) + 'px'; //数字是页面布局高度差
        },
        toImage() {
            setTimeout(() => {
                window.pageYOffset = -10;
                document.documentElement.scrollTop = 0
                document.body.scrollTop = 0
                html2canvas(this.$refs.imageWrapper,{backgroundColor: null}).then(canvas => {
                    let dataURL = canvas.toDataURL("image/png")
                    this.imgUrl = dataURL
                    if (this.imgUrl !== "") {
                        // this.dialogVisible = true
                    }
                });
            }, 1000);
        }
    }
};
</script>
<style scoped>
</style>